<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--<div th:replace="~{fragement/js::js}"></div>-->

<body>
<div style="display: flex">
    <div>
        <div style="padding: 10px 0">
            <h3>显示单个基本类型</h3>
            <div th:text="${name}"></div>
        </div>

        <div style="padding: 10px 0">
            <h3>显示引用类型</h3>
            <div th:text="${u.name}"></div>
            <div th:text="${u.age}"></div>
            <div th:text="${u.nickName}"></div>
        </div>

        <div style="padding: 10px 0">
            <h3>显示集合或者数组</h3>
            <div th:each="u:${list}" style="border-bottom: solid 1px lightgray;margin-top: 10px">
                <div>名称：<span th:text="${u.name}"></span></div>
                <div>昵称：<span th:text="${u.nickName}"></span></div>
                <div>年龄：<span th:text="${u.age}"></span></div>
                <div th:text="'年龄：'+${u.age}"></div>
                <div th:text="'索引：'+${uStat.index}"></div>
            </div>
        </div>
    </div>
    <div style="margin-left: 20px;border-left: red solid;padding: 20px">
        <div style="padding: 10px 0">
            <h3>用@{/} 表示上下文路径</h3>
            <div th:text="@{/}"></div>
            <div><img th:src="@{/images/imgTest.jpg}" style="width: 60px;height: 60px"></div>
            <div><a th:href="@{/pages/back/user/getUserById}">访问用户页面</a></div>
        </div>

        <div style="padding: 10px 0">
            <h3>用*{} 表示声明一个变量，在内部使用就不用写变量名称了【了解】</h3>
            <div th:object="${u}">
                <div th:text="*{name}"></div>
                <div th:text="*{nickName}"></div>
                <div th:text="*{age}"></div>
            </div>
        </div>
        <div style="padding: 10px 0">
            <h3>表达式基本对象</h3>
            <div th:text="${application.ceshi}"></div>
            <div th:text="${#servletContext.getAttribute('ceshi')}"></div>
            <h3><span style="color: red;font-weight: bold">【掌握】</span>session</h3>
            <div th:text="${session.nickName}"></div>
        </div>
        iqi
        <div style="padding: 10px 0">
            <h3>表达式工具对象</h3>

            <div>
                <h3>日期</h3>
                <div>现在日期：<span th:text="${#dates.createNow()}"></span></div>
                <div>日期格式化：<span th:text="${#dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm')}"></span></div>
                <div>后台传递的日期：<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm')}"></span></div>
            </div>
            <div style="margin-top: 10px">
                <h3>数字:掌握格式化数字和 sequence方法</h3>
                <div>格式化数字（四舍五入）：<span th:text="${#numbers.formatDecimal(1.2345,3,2,'COMMA')}"></span></div>
                <div>格式化数字：<span th:text="${#numbers.formatDecimal(1.2354,3,2)}"></span></div>
                这个的作用是以后我们可以在没有后台数据的时候，模拟前端长相
                <div th:each="x:${#numbers.sequence(1,5)}" th:text="${x}"></div>
                下面这个是步长为2
                <div th:each="x:${#numbers.sequence(1,10,2)}" th:text="${x}"></div>
            </div>
            <div style="margin-top: 10px">
                <h3>集合数组</h3>
                <div th:text="${#lists.size(list)}"></div>
                整合sequence
                <div th:each="x:${#numbers.sequence(0,#lists.size(list))}" th:text="${x}"></div>
            </div>
        </div>
    </div>

    <div style="margin-left: 20px;border-left: red solid;padding: 20px">
        <div style="padding: 10px 0">
            <h3>掌握strings方法中的to'String方法：这个方法会在后端传递Long类型（超过17位）的时候，需要转换成字符串</h3>
        </div>
        <div style="padding: 10px 0">
            <h3>掌握th:text和th:utext的区别</h3>
            <div th:text="${text}"></div>
            <div th:utext="${text}"></div>
            utext在商品的详情页面会用到，因为商品详情页面里边的图片是base64为的，而且还包含了很多标签，也就是说是一个富文本。所以
            这个时候需要用到utext
        </div>
        <div style="padding: 10px 0">
            <h3 th:text="#{test}">掌握th:if判断</h3>
            <div th:if="${u.name=='张四'}">出现</div>
            <div th:if="false">隐藏</div>
            <div th:unless="false">隐藏</div>
        </div>
    </div>

    <

    <div style="margin-left: 20px;border-left: red solid;padding: 20px">
        <div style="padding: 10px 0">
            <h3>【掌握】 替换、插入、包含(代码碎片)</h3>

            <div>第一种：替换碎片:特点：就是将这个div替换成引入的div,引入的div的标签是会被引入的
                <div th:replace="fragment/js::js"></div>
            </div>
            <div>
                第二种：插入碎片:特点：
                <div th:insert="fragment/js::js"></div>
            </div>
            <div>
                第二种：包含碎片:特点：只会包含引入的碎片标签种的内容
                <div th:include="~{fragment/js::js}"></div>
            </div>
            总结：th:insert建议不使用（从3.0开始），大部分情况，建议使用th：replace
        </div>

    </div>

    <div style="margin-left: 20px;border-left: red solid;padding: 20px">
        <div style="padding: 10px 0">
            <h3>【了解】 国际化语言支持：#{}</h3>
            <h1 th:text="#{msg}"></h1>
        </div>
        <a th:href="@{/pages/back/user/getUserById(lan='zh_CN')}">中文显示</a>
        <a th:href="@{/pages/back/user/getUserById(lan='en_US')}">英文显示</a>


    </div>


</div>


</body>
</html>
